大家好，我是長風青雲。
今天是參加鐵人賽的第十三天，恭喜，我們今天是講網路相簿的最後一天了！
排版方面，其實我的預想便是像以前無名小站那樣的形式。(聽說比我再小，就不會聽過無名了哈哈哈)。
所以先讓我們來寫他的html吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/nav_bar.css')}}">
<title>ironman album</title>
</head>
<style>
html{
height:100%;
}
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: lavender;
height: 100%;
}
table{
border:none;
width:70%;
height: 95%;
padding-top: 5%;
}
td{
text-align: center;
}
img,video{
max-width: 100%;
max-height:400px;
}
video{
border:1px solid #aaa;
}
@media screen and (max-width: 400px)
{
ul{
z-index: 100;
}
table{
border:none;
width:90%;
height: 100%;
padding-top: 10%;
}
img,video{
max-width: 100%;
max-height: 300px;
}
video{
border:1px solid #aaa;
}
}
.button {
border:0;
background-color:darkviolet;
color:#fff;
border-radius:20px;
cursor:pointer;
width:90px;
height:30px;
}
.present{
}
.button:hover{
color:black;
background-color: lavender;
}
.up {
border:none;
background-color: lavender;
height: 10%;
width:50%;
}
.left{
text-align: left;
padding-left: 10%;
}
.right{
text-align: right;
padding-right: 10%;
}
</style>
<body>
<ul class="computer" id="topnav">
<li><a href="../../../" class="active">首頁</a></li>
<li><a href="../../../album">相簿</a></li>
<li><a href="../../../upload">上傳</a></li>
<li><a href="../../../logout">登出</a></li>
<li style="float:right"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
<table align="center">
<form action="" enctype='multipart/form-data' method='POST'>
<tr>
<td class="up" style="text-align: left;">
Folder:<select id="folder" name=folder onchange="this.form.submit()">
{% for dir in dirs %}
<option value={{dirs.index(dir)}}>{{dir}}</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
{% if name == fileName[0] and name == fileName[-1] %}
<td class="up left"><input class='button' value='往前' name='next' type='submit' disabled></td>
<td class="up right"><input class='button' value='往後' name='next' type='submit' disabled></td>
{% elif name == fileName[0] %}
<td class="up left"><input class='button' value='往前' name='next' type='submit' disabled></td>
<td class="up right"><input class='button' value='往後' name='next' type='submit'></td>
{% elif name == fileName[-1] %}
<td class="up left"><input class='button' value='往前' name='next' type='submit'></td>
<td class="up right"><input class='button' value='往後' name='next' type='submit' disabled></td>
{% else %}
<td class="up left"><input class='button' value='往前' name='next' type='submit'></td>
<td class="up right"><input class='button' value='往後' name='next' type='submit'></td>
{% endif %}
</tr>
</form>
<tr>
<td colspan="2" class="present">
{% if name[-3::] == 'jpg' %}
<img src="../../static/uploads/{{username}}/{{folder}}/photo/{{name}}">
{% else %}
<video controls="controls">
<source src="../../static/uploads/{{username}}/{{folder}}/video/{{name}}" type="video/mp4">
</video>
{% endif %}
</td>
</tr>
</table>
<script>
function myFunction() {
var x = document.getElementById("topnav");
if (x.className === "computer") {
x.className = "phone";
} else {
x.className = "computer";
}
}
</script>
</body>
</html>
這裡就很像album那邊顯示圖片、選相簿而已。
往前往後的部分，我們留等一下app.py時說，於是比較值得注意的就只剩CSS RWD的部分。跟之前很像，但剛剛我在進行測試的時候發現了一個狀況。
我們disable的button居然會比我們的navbar還要上層！
這時就用到z-index，層數高的會蓋過低的。而我就很隨意的設為100((懶
接著就顯示正常了……但是我其實並不滿意。他還是有bug的……
在我原先的預想中，當我手機進行轉向，他將會依我屏幕的大小變長相。
是的，又是跟album顯示時遇見類似的問題。
所以前天無法解決問題的我，當然還是沒辦法解決問題。
只能依照自己的視窗大小設定max-height。(因為我在td用比例他不裡我QAQ)
非常地不美觀！所以我覺得我做的還不夠好。
如果有人能告訴我怎麼修改，我會非常感謝你！(為什麼我腦海中突然冒出三隻眼睛的綠色外星人
因為你救了我們，我們永遠感謝你！
然後我來跟你們說說app.py的部分。(後端還是比較可愛的……只需要程式碼的秩序美)
@app.route('/stream/<folder>/<name>',methods=['GET','POST'])
def stream(folder,name):
basepath = os.path.join(os.path.dirname(__file__),'static','uploads')
dirs=os.listdir(os.path.join(basepath,session.get('username')))
dirs.insert(0,'')
fileName=[]
for lists in os.listdir(os.path.join(basepath,session.get('username'),folder,'photo')):
sub_path = os.path.join(os.path.join(basepath,session.get('username'),folder,'photo'),lists)
fileName.append(lists)
for lists in os.listdir(os.path.join(basepath,session.get('username'),folder,'video')):
sub_path = os.path.join(os.path.join(basepath,session.get('username'),folder,'video'),lists)
fileName.append(lists)
if request.method=='POST':
if request.values['folder'] !='0':
folder=dirs[int(request.values['folder'])]
fileName.clear()
fileName=[]
for lists in os.listdir(os.path.join(basepath,session.get('username'),folder,'photo')):
sub_path = os.path.join(os.path.join(basepath,session.get('username'),folder,'photo'),lists)
fileName.append(lists)
for lists in os.listdir(os.path.join(basepath,session.get('username'),folder,'video')):
sub_path = os.path.join(os.path.join(basepath,session.get('username'),folder,'video'),lists)
fileName.append(lists)
name=fileName[0]
elif request.values['next']=='往前':
name=fileName[(fileName.index(name))-1]
elif request.values['next']=='往後':
name=fileName[(fileName.index(name))+1]
return redirect(url_for('stream',folder=folder,name=name))
return render_template('stream.html',dirs=dirs,name=name,folder=folder,fileName=fileName,username=session.get('username'))
這裡fileName的作用就是將相冊中的影片和圖片一起彙整。
然後request.value[‘folder’]!=’0’就代表我們選擇換新相冊，所以fileName要重新彙整，而預設先顯示第一張。
往前與往後，就是抓初原先的照片位於fileName哪個位置，往前往後找便是。
在html裡，如果我們現在是第一張，往前就會disable，同樣最後一張時往後也會disable，如果這個相簿只有一個檔案，那麼就無法往前往後。
想想，其實也已經沒什麼特別好說的了。其實album部分到這裡已經算是完成50%左右了吧。
而我也打算這是我在鐵人賽中網路相簿的最後一篇。
完整的程式碼我會放到github上，之後如果有時間我會進行更新。
(Fatube便是這次網路相簿的原型，但當我深入探索後，發現那是個絕對的失敗品)
如果有興趣追這個album的人……應該沒有人？
好了好了，廢話不多說，明天我們要講我們第二個實例 ── 個人單字書。
iThome鐵人賽
看影片追技術